<template>
  <div class="content-box-full">
    <ContainerBox>
      <template #header>
        <el-form
          @keyup.enter.native="handleSearch"
          ref="formRef"
          :model="searchForm"
          label-width="auto"
          inline
        >
          <el-form-item label="补贴编号:" prop="subsidyNo">
            <el-input
              v-model="searchForm.subsidyNo"
              placeholder="空格分隔可以查询多个编号"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="补贴名称:" prop="subsidyName">
            <el-input v-model.number="searchForm.subsidyName" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="薪资范围" prop="salaryRange">
            <el-select
              class="inline-select"
              filterable
              clearable
              collapse-tags
              multiple
              v-model="searchForm.salaryRange"
              placeholder="薪资范围"
            >
              <el-option
                v-for="item in hcmPayGroupEntities"
                :key="item.id"
                :value="item.code"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-prevent-reclick type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleAdd" v-prevent-reclick>新增</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="tableData"
          :empty-text="isLoadingTable ? '加载中...' : '暂无数据'"
          class="table-box"
          height="100%"
          stripe
          fit
          border
          highlight-current-row
        >
          <el-table-column type="index" align="center" label="序号" width="100"></el-table-column>
          <el-table-column label="补贴编号" align="center" min-width="100" prop="subsidyNo">
          </el-table-column>
          <el-table-column label="补贴名称" align="center" min-width="100" prop="subsidyName">
          </el-table-column>
          <el-table-column label="工资范围" align="center" min-width="100" prop="salaryRange">
          </el-table-column>
          <el-table-column label="员工组" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="用工性质" align="center" min-width="100" prop="employeeNature">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" min-width="200">
            <template #default="{ row }">
              <el-button @click="checkRow(row)">查看</el-button>
              <el-button @click="editRow(row)">编辑</el-button>
              <el-button @click="deleteRow(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <CommonPaging
          :total="tableTotal"
          :current-page="pageNum"
          @currentChange="handleCurrentChange"
          @sizeChange="handleSizeChange"
        ></CommonPaging>
      </template>
    </ContainerBox>
    <el-dialog
      lock-scroll
      top="10vh"
      class="common-el-dialog"
      v-model="showDialog"
      :title="dialogType === 'add' ? '新增' : '编辑'"
      width="600"
      @close="handleClose"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRules"
        label-width="120px"
        status-icon
        :disabled="dialogType === 'check'"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="补贴编号:" prop="subsidyNo">
              <el-input
                :disabled="!isAdd"
                v-model="dataForm.subsidyNo"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="补贴名称:" prop="subsidyName">
              <el-input v-model="dataForm.subsidyName" type="text" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工资范围:" prop="salaryRange">
              <el-select filterable clearable v-model="dataForm.salaryRange" placeholder="薪资范围">
                <el-option
                  v-for="item in hcmPayGroupEntities"
                  :key="item.id"
                  :value="item.code"
                  :label="`${item.code}-${item.label}`"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工组:" prop="employeeClass">
              <el-select
                filterable
                clearable
                v-model="dataForm.employeeClass"
                placeholder="薪资范围"
              >
                <el-option
                  v-for="item in hcmEmployeeClassEntities"
                  :key="item.id"
                  :value="item.code"
                  :label="`${item.code}-${item.label}`"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用工性质:" prop="employeeNature">
              <el-select
                filterable
                clearable
                v-model="dataForm.employeeNature"
                placeholder="薪资范围"
              >
                <el-option
                  v-for="item in hcmEmploymentNatureEntities"
                  :key="item.id"
                  :value="item.code"
                  :label="`${item.code}-${item.label}`"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="早餐补贴:" prop="breakfastPrice">
              <el-input v-model.number="dataForm.breakfastPrice" type="text" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="中餐补贴:" prop="lunchPrice">
              <el-input v-model.number="dataForm.lunchPrice" type="text" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="晚餐补贴:" prop="dinnerPrice">
              <el-input v-model.number="dataForm.dinnerPrice" type="text" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="夜宵补贴:" prop="nightSnackPrice">
              <el-input v-model.number="dataForm.nightSnackPrice" type="text" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="深夜宵补贴:" prop="lateNightSnackPrice">
              <el-input
                v-model.number="dataForm.lateNightSnackPrice"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最大补贴金额:" prop="subsidyRestrictions">
              <el-input
                v-model.number="dataForm.subsidyRestrictions"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button
            v-show="dialogType !== 'check'"
            type="primary"
            v-prevent-reclick
            @click="handleFormSubmit"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import ContainerBox from '@/components/base/ContainerBox.vue'
import { ref, onMounted, computed } from 'vue'
import CommonPaging from '@/components/base/CommonPaging.vue'
import message from '@/utils/elMessage.js'
import { usePublicStore } from '@/stores/publicInfo.js'
import subsidyManageApi from '@/api/subsidyManageApi.js'

const publicStore = usePublicStore()

onMounted(() => {
  fetchList()
})
const searchForm = ref({
  subsidyNo: '', //补贴编号
  subsidyName: '', //补贴名称
  salaryRange: [], //工资范围
})
const hcmPayGroupEntities = computed(() => publicStore.hcmPayGroupEntities)
const hcmEmployeeClassEntities = computed(() => publicStore.hcmEmployeeClassEntities)
const hcmEmploymentNatureEntities = computed(() => publicStore.hcmEmploymentNatureEntities)
const pageNum = ref(1)
const pageSize = ref(10)

//查询
function handleSearch() {
  handleCurrentChange(1)
}

function fetchList() {
  isLoadingTable.value = true
  tableData.value = []
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    subsidyNo: searchForm.value.subsidyNo,
    subsidyName: searchForm.value.subsidyName,
    salaryRanges: searchForm.value.salaryRange.join(','),
  }
  subsidyManageApi
    .fetchList(params)
    .then((res) => {
      if (res.code === 0) {
        const data = res.page || {}
        tableTotal.value = data.totalCount || 0
        tableData.value = data.list || []
      } else {
        message.warning(res.msg)
      }
    })
    .finally(() => {
      isLoadingTable.value = false
    })
}

// 列表数据
const isLoadingTable = ref(false)
const tableData = ref([])
const tableTotal = ref(0)

function checkRow(row) {
  editRow(row, 'check')
}

function editRow(row, handleType = 'edit') {
  subsidyManageApi.check(row.id).then((res) => {
    if (res.code === 0) {
      const {
        id,
        subsidyNo,
        subsidyName,
        salaryRange,
        employeeClass,
        employeeNature,
        breakfastPrice,
        lunchPrice,
        dinnerPrice,
        nightSnackPrice,
        lateNightSnackPrice,
        subsidyRestrictions,
      } = res.subsidyManagement || {}
      dataForm.value.id = id
      dataForm.value.subsidyNo = subsidyNo
      dataForm.value.subsidyName = subsidyName
      dataForm.value.salaryRange = salaryRange
      dataForm.value.employeeClass = employeeClass
      dataForm.value.employeeNature = employeeNature
      dataForm.value.breakfastPrice = breakfastPrice
      dataForm.value.lunchPrice = lunchPrice
      dataForm.value.dinnerPrice = dinnerPrice
      dataForm.value.nightSnackPrice = nightSnackPrice
      dataForm.value.lateNightSnackPrice = lateNightSnackPrice
      dataForm.value.subsidyRestrictions = subsidyRestrictions
      dialogType.value = handleType
      showDialog.value = true
    } else {
      message.warning(res.msg)
    }
  })
}

function deleteRow(row) {
  if (row.id) {
    message.confirm('您是否确定要删除该数据?', '提示').then(() => {
      subsidyManageApi
        .delete([row.id])
        .then((res) => {
          if (res.code === 0) {
            message.success(res.msg)
            fetchList()
          } else {
            message.warning(res.msg)
          }
        })
        .catch((error) => {
          console.error(error.messages)
        })
    })
  }
}

function handleCurrentChange(val) {
  pageNum.value = val
  fetchList()
}

function handleSizeChange(val) {
  pageNum.value = 1
  pageSize.value = val
  fetchList()
}

// 新增补贴相关
const showDialog = ref(false)
const dialogType = ref('add')
const dataFormRef = ref(null)
//是否是新增操作
const isAdd = computed(() => dialogType.value === 'add')
const dataForm = ref({
  id: undefined, //编辑使用
  subsidyNo: '', //补贴编号
  subsidyName: '', //补贴名称
  salaryRange: '', //工资范围
  employeeClass: '', //员工组
  employeeNature: '', //用工性质
  breakfastPrice: '', //早餐补贴
  lunchPrice: '', //中餐补贴
  dinnerPrice: '', //晚餐补贴
  nightSnackPrice: '', //夜宵补贴
  lateNightSnackPrice: '', //深夜宵补贴
  subsidyRestrictions: '', //最大补贴金额
})
const dataRules = ref({
  subsidyNo: [
    { required: true, message: '补贴编号不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '补贴编号不可以为空',
      trigger: 'change',
    },
  ],
  subsidyName: [
    { required: true, message: '补贴名称不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '补贴名称不可以为空',
      trigger: 'change',
    },
  ],
  employeeClass: [
    { required: true, message: '员工组不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '员工组不可以为空',
      trigger: 'change',
    },
  ],
  employeeNature: [
    { required: true, message: '用工性质不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '用工性质不可以为空',
      trigger: 'change',
    },
  ],
  salaryRange: [
    { required: true, message: '工资范围不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '工资范围不可以为空',
      trigger: 'change',
    },
  ],
  breakfastPrice: [
    { required: true, message: '早餐补贴不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '早餐补贴不可以为空',
      trigger: 'change',
    },
  ],
  lunchPrice: [
    { required: true, message: '中餐补贴不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '中餐补贴不可以为空',
      trigger: 'change',
    },
  ],
  dinnerPrice: [
    { required: true, message: '晚餐补贴不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '晚餐补贴不可以为空',
      trigger: 'change',
    },
  ],
  nightSnackPrice: [
    { required: true, message: '夜宵补贴不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '夜宵补贴不可以为空',
      trigger: 'change',
    },
  ],
  lateNightSnackPrice: [
    { required: true, message: '深夜宵补贴不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '深夜宵补贴不可以为空',
      trigger: 'change',
    },
  ],
  subsidyRestrictions: [
    { required: true, message: '最大补贴金额不可以为空', trigger: 'blur' },
    {
      required: true,
      message: '最大补贴金额不可以为空',
      trigger: 'change',
    },
  ],
})

//新增
function handleAdd() {
  dialogType.value = 'add'
  showDialog.value = true
}

function handleClose() {
  dataFormRef.value.resetFields()
}

function handleFormSubmit() {
  dataFormRef.value.validate((bool) => {
    if (bool) {
      const params = {
        id: isAdd.value ? undefined : dataForm.value.id,
        subsidyNo: dataForm.value.subsidyNo,
        subsidyName: dataForm.value.subsidyName,
        salaryRange: dataForm.value.salaryRange,
        employeeClass: dataForm.value.employeeClass,
        employeeNature: dataForm.value.employeeNature,
        breakfastPrice: dataForm.value.breakfastPrice,
        lunchPrice: dataForm.value.lunchPrice,
        dinnerPrice: dataForm.value.dinnerPrice,
        nightSnackPrice: dataForm.value.nightSnackPrice,
        lateNightSnackPrice: dataForm.value.lateNightSnackPrice,
        subsidyRestrictions: dataForm.value.subsidyRestrictions,
      }
      const fetchApi = isAdd.value ? subsidyManageApi.save : subsidyManageApi.update
      fetchApi(params).then((res) => {
        if (res.code === 0) {
          isAdd.value ? handleCurrentChange(1) : fetchList()
          showDialog.value = false
        } else {
          message.warning(res.msg)
        }
      })
    }
  })
}
</script>

<style scoped lang="scss"></style>
